@import './icon.scss';
@import './input.scss';
@import './option.scss';
@import './scroll.scss';

.vxp-select {
  @include basis;

  position: relative;
  display: inline-block;
  width: 100%;

  &__trigger,
  &__input {
    cursor: pointer;
    user-select: none;
  }

  &__popper {
    z-index: $vxp-z-index-popper;
    display: flex;
    min-width: 7em;
    padding: 0.35em 0;

    .vxp-scroll__wrapper {
      width: 100%;
    }
  }

  &__list {
    display: inline-block;
    width: 100%;
    user-select: none;
    background-color: $vxp-select-color-bg-list;
    border-radius: $vxp-select-border-radius-list;
    box-shadow: $vxp-select-shadow-list;

    .vxp-scroll__wrapper {
      padding: 0.35em 0;
    }
  }

  &__options {
    padding: 0;
    margin: 0;
  }

  &__trigger--selected .vxp-option {
    background-color: $vxp-select-color-bg-option-hover;
  }

  &__arrow {
    transition: $vxp-transition-transform-base;
  }

  &--visible &__arrow {
    transform: rotate(180deg);
  }
}
